import './style.scss'
import React, { useState, useCallback } from 'react'
import type { FC, Key } from 'react'
import { useSearchParams } from 'react-router-dom'
import { Divider, Modal } from 'antd'
import SearchUser from './ui/SearchUser'
import BtnsUser from './ui/BtnsUser'
import TableUser from './ui/TableUser'
/*
useEffect useState  => hooks => [total data  loadData]
自定义hook完成对于用户列表的获取和分页请求
*/
import { useUserList } from '@/hooks/useUser'
import MyDialog from '@/components/MyDialog'
import UserAdd from './ui/UserAdd'

const User: FC = () => {
  // 获取search字符串
  const [search, setSearch] = useSearchParams()
  // 获取当前页码
  let page = search.get('page') ? Number(search.get('page')) : 1
  let query = Object.fromEntries(search.entries())

  // 获取用户数据
  const [total, data, loadData] = useUserList(page, query)
  // 弹出层显示或隐藏操作
  const [isVisiable, setIsVisiable] = useState(false)
  const changeVisiable = useCallback((show: boolean) => {
    setIsVisiable(show)
    if (!show) {
      loadData(page)
    }
  }, [])
  // 全选数据状态
  const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>([])
  const changeSelectedRowKeys = useCallback((keys: Key[]) => {
    setSelectedRowKeys(keys)
  }, [])

  return (
    <div className="user-container">
      <SearchUser loadData={loadData} />
      <Divider />
      <BtnsUser
        changeVisiable={changeVisiable}
        selectedRowKeys={selectedRowKeys}
        changeSelectedRowKeys={changeSelectedRowKeys}
        loadData={loadData}
      />
      <Divider />
      <TableUser
        total={total}
        data={data}
        loadData={loadData}
        selectedRowKeys={selectedRowKeys}
        changeSelectedRowKeys={changeSelectedRowKeys}
      />
      {/* 弹出层 */}
      <MyDialog isVisiable={isVisiable} changeVisiable={changeVisiable}>
        <UserAdd changeVisiable={changeVisiable} />
      </MyDialog>
    </div>
  )
}

export default User
